<template>
    <block v-if="items.length > 0">
        <view class="nova-list msg-list">
            <view class="nova-column msg" v-for="(item, index) in items" :key="index" @click.stop="goDetail(item)">
                <text class="type">{{ item.notice_title }}</text>
                <text class="time">{{ item.create_time || '未知时间' }}</text>
                <text class="content">{{ item.notice_cotent || '内容' }}</text>
                <view class="status"></view>
            </view>
            <uni-popup type="center" ref="popup" class="popup" v-if="items && items.length > 0">
                <view class="content nova-column nova-flex-center">
                    <text class="title" style="font-weight: 600;">{{ selectItem.notice_title }}</text>
                    <text class="time">{{ selectItem.create_time }}</text>
                    <text class="desc">{{ selectItem.notice_cotent }}</text>
                    <view class="nova-row-center" style="justify-content: center; padding-top: 64rpx; width: 100%;">
<!--                        <view class="btn-primary-invert btn nova-flex nova-flex-center" @click="goDetail2">详情</view> -->
                        <view class="btn-primary-invert btn nova-flex nova-flex-center" @click="goCall">
                            <image src="../../static/img/call_p.png" />
                            拨打
                        </view>
                    </view>
                    <image class="close" src="../../static/img/dialog-close.png" @click.stop="showCorpPopup(false)"></image>
                </view>
            </uni-popup>
        </view>
    </block>
    <block v-else>
        <view class="nova-flex nova-flex-center empty">
            <!-- <image src="em"></image> -->
            <text>暂无记录</text>
        </view>
    </block>
</template>

<script>
import uniPopup from '../../components/uni-popup/uni-popup.vue';
export default {
    components: {
        uniPopup
    },
    data() {
        return {
            role: this.$global.role,
            items: [],
            page: 0,
            pageSize: 10,
            selectItem: {},
            corpPopup: false
        };
    },
    methods: {
        async loadData() {
            let res = await this.$request.post({
                url: '/aunt/noticeList',
                data: {
                    page: this.page + 1,
                    row: this.pageSize
                }
            });
            console.log(res);
            if (this.reload) {
                this.items = res || [];
            } else {
                this.items = this.items.concat(res);
                if (res.length >= this.pageSize) {
                    this.page++;
                }
            }
            this.reload = false;
        },
        showCorpPopup(show) {
            if (show) {
                this.$refs.popup.open();
            } else {
                this.$refs.popup.close();
            }
        },
        async goDetail(item) {
            this.selectItem = item;
            let url = 'aunt/mine/myDetail';
            
            let res = await this.$request.post({
                url: '/aunt/noticeDetail',
                data: {
                    notice_id: item.notice_id
                }
            });
            this.selectItem = res;
            this.$refs.popup.open();
        },
        goDetail2() {
            let d = this.selectItem;
            console.log(d);
            let url = `../c/p-job-detail?publish_id=${d.publish_id}&page=msg`
            if (d.jumpAunt) {
                url = `../c/p-aunty-detail?resume_id=${d.resume_id}&company_id=${d.company_id}&page=msg`
            }
            if (this.role == 1) {
                if (!d.publish_id) {
                    console.error('数据错误，接口返回的数据有问题')
                    return;
                }
                uni.navigateTo({
                    url: url
                });
            } else if (this.role == 2) {
                uni.navigateTo({
                    url: `../c/p-job-detail?publish_id=${d.publish_id}&page=msg`
                });
            } else if (this.role == 3) {
                
            }
            this.$refs.popup.close();
        },
        goCall() {
            uni.makePhoneCall({
                phoneNumber: this.selectItem.company_telephone
            });
        }
    },
    onLoad() {
        this.role = this.$global.role;
        this.loadData();
    },
    onPullDownRefresh() {
        this.reload = true;
        this.loadData();
    },
    onReachBottom() {
        this.loadData();
    }
};
</script>

<style lang="scss">
page {
    background-color: #fcfcfc;
}
.msg-list {
    padding: 26rpx;
    .msg {
        padding: 20rpx 20rpx 30rpx 48rpx;
        position: relative;
        border-radius: 12rpx;
        border: 1px solid $uni-border-color;
        box-shadow: 0 0 2rpx #f2f2f2;
        background-color: white;
        margin-bottom: 20rpx;
        .status {
            width: 16rpx;
            height: 16rpx;
            border-radius: 8rpx;
            background-color: $uni-color-primary;
            position: absolute;
            z-index: 1;
            left: 20rpx;
            top: 30rpx;
        }
        .read {
            background-color: none;
        }
        .type {
            font-size: 30rpx;
            color: #000000;
        }
        .time {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 48rpx;
        }
        .content {
            font-size: 28rpx;
            color: #010101;
        }
    }
}
.popup {
    .content {
        position: relative;
        width: 600rpx;
        border-radius: 24rpx;
        background-color: white;
        padding: 46rpx 64rpx;
        .close {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            top: 25rpx;
            right: 25rpx;
            z-index: 1;
        }

        .title {
            font-size: 30rpx;
            color: #000000;
        }
        .desc {
            font-size: 28rpx;
            color: #010101;
            line-height: 40rpx;
        }
        .time {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 48rpx;
        }
        .btn {
            width: 200rpx;
            height: 70rpx;
        }
    }
}
</style>
